<template>
	<view class="pages">
		<image src="../../static/index/banner1.png" class="banner-img" @tap="goRecord"></image>
		<view class="time-content" v-if="state == 2">
			正在抢购中！倒计时：<span>{{time}}</span>
		</view>
		
		<view class="item" v-for="(item,index) in list" :key="index">
			<view class="goods-content">
				<image :src="item.imageUrl" class="goods-img"></image>
				<view class="goods-info">
					<view class="title">{{item.goodsName}}</view>
					<view class="tips">可用购物积分：<span>{{item.availableAmount}}</span></view>
					<view class="tips">日化收益：<span>1天/{{item.dailyProfit}}%</span></view>
					<view class="tips">场次时间：<span>{{item.beginTime}}-{{item.endTime}}</span></view>
				</view>
			</view>
			<view class="input-content">
				<input class="input" placeholder="请输入参与积分" v-model="data[index]" placeholder-class="placeholder"/>
				<view class="submit" @tap="submit(item,index)">立即抢购</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { sessionList,rushToBuy,nearestTime } from '../../api/api.js'
	export default {
		data() {
			return {
				list:[],
				time:'',
				interval:'' ,// 计时器
				data:[],  // 积分
				state:'', // 状态0全部已结束1还有下一场2正在抢购中
				pageSize:10,
				pageNum:1,
				pages:'',
				total:'',
			}
		},
		onShow() {
			this.list = []
			// 获取列表
			this.getList()
			// 获取倒计时
			this.getNearestTime()
		},
		onUnload() {
			clearInterval(this.interval)
		},
		onReachBottom() {
			if(this.pages <= this.pageNum) {
				uni.showToast({
					icon:'none',
					title:'暂无更多~'
				})
				return
			}else {
				this.pageNum ++
				// 获取预约记录
				this.getList()
			}
		},
		methods: {
			// 获取列表
			getList() {
				let data = {}
				sessionList(data).then( res=> {
					this.list = this.list.concat(res.data.list)
					this.pages = res.data.pages
					this.total = res.data.total
				})
			},
			
			// 获取倒计时
			getNearestTime() {
				let data = {}
				nearestTime(data).then( res=> {
					this.state = res.data.state
					if( res.data.state == 0 || res.data.state == 1 ) {
						return
					}
					var that = this
					that.interval = setInterval(function(){
						that.time = that.countDown(res.data.endTimestamp)
						console.log(1)
					},1000)
					
				})
			},
			
			// 提交
			submit(item,index) {
				let data = {
					amount:this.data[index],
					goodsId:item.goodsId
				}
				rushToBuy(data).then( res=> {
					console.log(res)
					uni.showToast({
						title:'抢券成功',
						icon:'none'
					})
				})
			},
			
			// 前往抢券记录
			goRecord() {
				uni.navigateTo({
					url:'/pages/index/appointmentRecord'
				})
			}
		}
	}
</script>

<style lang="less">
    .pages {
		.banner-img {
			width: 750rpx;
			height: 284rpx;
			display: block;
		}
		.time-content {
			padding-left: 30rpx;
			font-size: 34rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #DA0000;
			line-height: 86rpx;
			width: 720rpx;
			height: 86rpx;
			background: #FFEBEE;
			span {
				font-size: 40rpx;
				color: rgba(218, 0, 0, 1);
			}
		}
		
		.item {
			padding-bottom: 36rpx;
			border-bottom: 1px solid #EEEEEE;
			margin-left: 30rpx;
			margin-top: 36rpx;
			width: 690rpx;
			.goods-content {
				display: flex;
				align-items: center;
				.goods-img {
					width: 300rpx;
					height: 210rpx;
				}
				.goods-info {
					margin-left: 20rpx;
					.title {
						font-size: 30rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #1A1A1A;
						line-height: 42rpx;
					}
					.tips {
						margin-top: 13rpx;
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #808080;
						line-height: 37rpx;
						span {
							font-size: 30rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #1A1A1A;
						}
					}
				}
			}
			.input-content {
				margin-top: 30rpx;
				display: flex;
				align-items: center;
				.input {
					height: 68rpx;
					padding-left: 25rpx;
					width: 320rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FE3B33;
					background-color: RGBA(227, 238, 255, 1);
					border-radius: 4rpx 0rpx 0rpx 4rpx;
				}
				.placeholder {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: rgba(23,119,255,0.4);
				}
				.submit {
					border-radius: 0rpx 4rpx 4rpx 0rpx;
					font-size: 30rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					text-align: center;
					line-height: 68rpx;
					height: 68rpx;
					width: 345rpx;
					background: linear-gradient(150deg, #61AEFF 0%, #FE3B33 100%);
				}
			}
		}
	}
</style>
